<template>
  <div class="bottom-right-table-3">
    <dv-border-box-6>
      <div class="table-name">
        <img src="./img/icon2.png">登录（DAU）
      </div>
      <dv-scroll-board :config="config" />
    </dv-border-box-6>
  </div>
</template>

<script>
import { daudata } from '@/api/chart'
export default {
  name: 'BottomRightTable3',
  data() {
    return {
      config: {},
      datas: []
    }
  },
  mounted() {
    this.getChartData()
  },
  methods: {
    getChartData() {
      const query = { 'pfid': [75, 77, 79, 137, 138, 153, 158, 202, 246, 272, 275] }
      daudata(query).then(response => {
        this.handleData(response.data)
      })
    },
    handleData(data) {
      data.forEach(item => {
        var arr = []
        arr.push(item.channel_id)
        arr.push(item.dau_count)
        this.datas.push(arr)
      })
      this.setOpt()
    },
    setOpt() {
      this.config = {
        data: this.datas,
        index: true,
        columnWidth: [50, 80],
        align: ['center'],
        oddRowBGC: 'rgba(9, 37, 50, 0.4)',
        evenRowBGC: 'rgba(10, 32, 50, 0.3)'
      }
    }
  }
}
</script>

<style lang="scss">
.bottom-right-table-3 {
  width: 27%;
  height: 100%;
  margin: 0 -5px;

  .border-box-content {
    padding: 20px;
    box-sizing: border-box;
  }

  .table-name {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;

    img {
      width: 40px;
      height: 40px;
      margin-right: 5px;
    }
  }

  .dv-scroll-board {
    height: 90%;
  }
}
</style>
